<template>
	<view class="margin-top-sm">
		<view class="bg-white group-view">
			<view class="flex justify-between group-view-top">
				<view>
					<text class="view-title">家政服务</text>
					<text class="view-sub-title">最快30分钟上门</text>
				</view>
				<view>

				</view>
			</view>
			<view class="bg-white flex justify-start">
				<view v-for="(item,index) in categoryList" :key="index" class=" group-goods">
					<view class="category-info">
						<view @tap="_urlJump(item)">
							<image :src="item.hktIcon" class="category-image" @error="_loadDefaultImg(item)"></image>
							<view class="category-text">{{item.hktName}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMallIndexCategoryList
	} from '../../api/index/indexApi.js'
	export default {
		name: "indexHousekeeping",
		data() {
			return {
				categoryList: []
			};
		},
		created() {
			this._loadMenus();
		},
		methods: {
			_loadMenus: function() {
				let _that = this;
				let params = {
					page: 1,
					row: 5,
					isShow: "Y",
					shopId: '9999',
					typeCd: '1001'
				}
				getMallIndexCategoryList(params)
					.then(function(result) {
						let categoryData = result.data
						_that.categoryList = categoryData;
					});
			},
			_loadDefaultImg: function(item) {
				item.hktIcon = "/static/menu.png"
			},
			_urlJump: function(_menu) {
				// 站内
				this.vc.navigateTo({
					url: '/pages/homemaking/cateServ?hktId='+_menu.hktId
				}, true);
			},
		}
	}
</script>

<style lang="scss">
	.group-view {
		border-radius: 10upx;
		padding: 20upx;

		.view-title {
			font-size: 36upx;
			color: #444;
		}

		.view-sub-title {
			font-size: 18upx;
			margin-left: 20upx;
			color: #FA2E1B;
		}

		.view-title-more {
			font-size: 18upx;
			color: #777;
			line-height: 48upx;
		}

		.group-goods {
			margin-top: 40upx;
			margin-bottom: 30upx;

			width: 20%;
		}

		.category-image {
			width: 40rpx;
			height: 40rpx;
			/* background-image: url('/static/images/user/class-02.png');
			background-size: cover; */
		}

		.category-text {

			font-size: 25rpx;
			width: 100%;
			margin-top: 10rpx;
		}

		.category-info {
			display: inline-block;
			text-align: center;
			position: relative;

		}

	}
</style>